<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>40 实例</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
    <h1>41 methods 方法 </h1>
    <a href="../index.html">返回</a>
    <hr />
    <h3>new 扩展名().$mount("#id") 挂载</h3>
    <h3>//nextTick 当构造器里的data 值 被修改完成后会调用这个方法，相当于一个钩子函数，和构造器中的updated 生命周期很像</h3>
    <div id="app">
        {{message}}
    </div>

    <button onclick="destory()">卸载，销毁</button>
    <button onclick="forceupdate()">更新</button>
    <button onclick="tick()">更新了</button>
    <script type="text/javascript">
        var lyy = Vue.extend({
            template: `<p>这个是Vue.extend创建的{{version}}</p>`,
            data: function () {
                return {
                    version: "1.0.0"
                }
            }
        });
        //挂载
        var ly = new lyy().$mount('#app');

        //销毁
        function destory() {
            ly.$destroy();
            console.log(ly);
        }

        //更新
        function forceupdate() {
            ly.$forceUpdate();
        }

        //nextTick 当构造器里的data 值 被修改完成后会调用这个方法，相当于一个钩子函数，和构造器中的updated 生命周期很想
        function tick() {
            console.log("更新前", ly.message);
            ly.message = "updated info";
            ly.version = "2.2";
            ly.$nextTick(function () {
                console.log("更完成了");
                console.log(ly.message);
                console.log(ly.version);
            })
        }
    </script>
</body>

</html>